import React, { useState } from 'react';
import { Layout, Row, Col, message, Button } from 'antd';
import services from '../../../../../services/api';
import EventAdd from '../../../Event/add'; //事件
import FieldAdd from '../../../../Variable/Field/add'; //字段
import StrategyComponentAdd from '../../Component/add'; // 组件
import PolicyAdd from '../../add'; // 策略
import TemplateAdd from '../../../StrategyTemplate/add'
import IndicatorAdd from '../../../../Variable/Indicator/add'; // 指标
import MenuMent from './menuMent'
import './step2.less';

const { Sider, Content } = Layout;
function Step2(props) {
  const [currentData, setCurrentData] = useState({}); // 内容数据
  const [importData, setImportData] = useState([])
  const [comIndex, setComIndex] = useState('');
  const [mentValue, setMentValue] = useState(props.submitData || []);
  const componentTuple = {
    "components": <StrategyComponentAdd value={currentData} actions={props.actions} actionType='detail' isImportant={true} />,
    "fields": <FieldAdd value={currentData} actionType='detail' isImportant={true} key={currentData.field_id} />,
    "event": <EventAdd value={currentData} actionType='detail' />,
    "features": <IndicatorAdd {...props} value={currentData} actionType='detail' isImportant={true} key={currentData.feature_id} />,
    "strategies": <PolicyAdd importData={importData} value={currentData} actions={props.actions} actionType='detail' isImportant={true} />,
    "template_list": <TemplateAdd changeForm={changeForm} importData={importData} value={currentData} 
    isDisable={true} 
    actionType='detail'></TemplateAdd>
 }
  function com(comIndex){
    return componentTuple[comIndex];
  }
  function changeForm(data) {
    mentValue.template_list =  mentValue.template_list.map(item => {
      if (item.uuid === currentData.uuid) {
        item.name = data.name;
        item.dept_arr.ids = data.dept_ids.map(it => it.value);
        item.dept_arr.name = data.dept_ids.map(it => it.label);
        item.remark = data.remark;

      }
      return item
    });
    setMentValue(mentValue);
    props.setMentValue && props.setMentValue(mentValue)
  };
  function handleSubmit() {
    const obj = {}
    if (mentValue.template_list) {
      const lists = mentValue.template_list.map(item => {
         if (!item.name) {
           message.warning('模板名称不能为空！');
           throw '模板名称不能为空！'
         }
         const params = {
           uuid: item.uuid,
           name: item.name,
           remark: item.remark,
           dept_arr: item.dept_arr
         }
         return params
      })
      obj.template_list = lists
    }
    props.type && services[props.type].importHandle({file_id: props.fileId, ...obj}).then(res => {
       if(!res.code) {
         props.setStep(res.data)
         props.goTo();
       } else {
        message.error(res.msg);
       }
    }).catch(err => {
      // message.error(err);
    })
  }
  const getData = (data) => {
    setComIndex(data.common);
    if (data.common === 'strategies' || data.common === 'template_list') {
      const lists = (Object.keys(data.datas).length && data.datas.components) || []
      setImportData(lists)
    }
    setCurrentData(data.datas);
  }
  return (
    <>
      <div className='submit-data-style'>
         <p>请确认您要导入的数据:</p>
         { props.nameData && (<div>
           <p><span>关联渠道：</span><span>{props.nameData.app_name}</span></p>
           <p><span>关联产品：</span><span>{props.nameData.product_name}</span></p>
         </div>)}
      </div>
      <Layout id='importArea' className='import-area bg-light'>
        <Sider className='import-area-side bg-light'>
          <div className='import-list'>
              <MenuMent setData={getData} value={mentValue}></MenuMent>
          </div>
        </Sider>
        <Content style={{ padding: '20px' }} className='stretegy-content'>
          <div className='stretegy-new'>
              {com(comIndex)}
          </div>
        </Content>
      </Layout>
      <div className='strategy-operater-ft'>
        <Row type='flex' justify='center'>
          <Col span={12} style={{ textAlign: 'center' }}>
            <Button onClick={() => props.goPrev && props.goPrev()}>上一步</Button>
            <Button
              type='primary'
              style={{ marginLeft: '10px' }}
              onClick={() => handleSubmit()}
            //   disabled={strategies.length === errors.length}
            >
              下一步
            </Button>
          </Col>
        </Row>
      </div>
    </>
  );
}
export default Step2;
